<template>
	<view>
		<wrapImgBg />

		<topHeader :navigationTitle="navigationTitle" :city="district" :keywords.sync="keyword" @onSearch="onRefresh">
			<view class="wrap-screen flex align-center just-between">
				<block v-for="(item, index) in tab_list" :key="index">
					<view
						class="flex align-center just-center"
						:class="item.type === type ? 'active' : 'normal'"
						@click.stop="onTab(index)"
					>
						<view class="f-30">{{ item.title }}</view>

						<image class="img" :src="$staticImagePath(item.icon)" />
					</view>
				</block>
			</view>
		</topHeader>

		<view class="wrap">
			<articleList :list="list" />
		</view>
	</view>
</template>

<script>
	import { getArticleList } from "@/API/article.js";
	import topHeader from "@/components/navigationBar/articleNavigationBar.vue";
	import wrapImgBg from "@/components/navigationBar/bgImg.vue";
	import articleList from "@/components/article/articleList.vue";
	import event from "@/utils/event.js";
	export default {
		components: {
			topHeader,
			wrapImgBg,
			articleList,
		},

		data() {
			return {
				tab_list: [
					{ title: "手气红包", icon: "article/tab_red.png", name: "红包广场", type: "1" },
					{ title: "优惠券红包", icon: "article/tab_coupon.png", name: "优惠券广场", type: "2" },
				], // 筛选列表
				navigationTitle: "红包广场", // 导航栏标题
				province: "", //省份
				city: "", //市
				district: "", //区
				lat: "",
				lng: "",
				type: "1",
				keyword: "", //搜索关键词

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			const locationInfo = this.$stoarge.getChangeCity();
			if (locationInfo) {
				this.province = locationInfo.province;
				this.city = locationInfo.city;
				this.district = locationInfo.district;
				this.lat = locationInfo.lat;
				this.lng = locationInfo.lng;
			}
			this.onRefresh();
		},
		onReady() {
			event.on("onSureChooseCity", this, res => {
				this.province = res.province;
				this.city = res.city;
				this.district = res.district;
				this.lat = res.lat;
				this.lng = res.lng;
				
				this.onRefresh();
			})
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		onUnload() {
			event.remove("onSureChooseCity", this);
		},
		methods: {
			/**
			 * 切换
			 */
			onTab(index) {
				this.type = this.tab_list[index].type;
				this.onRefresh();
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getArticleList({
					page: this.page,
					keyword: this.keyword,
					city: [this.province, this.city, this.district].join("/"),
					lat: this.lat,
					lng: this.lng,
					bonus_type: this.type,
				}).then((res) => {
					const list = res.data.data;
					if (this.page === 1) {
						this.total = res.data.total;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-screen {
		width: 100%;
		overflow: hidden;
		padding: 0 25rpx 20rpx;
		box-sizing: border-box;
		gap: 20rpx;

		> view {
			flex: 1;
			height: 78rpx;
			border-radius: 36rpx;
			overflow: hidden;
			gap: 14rpx;

			.img {
				width: 100rpx;
				height: 78rpx;
			}
		}

		.active {
			background: linear-gradient(to right, #dd0a2c, #f3a26a);
			color: white;
		}

		.normal {
			color: #865b2a;
			background: linear-gradient(to right, #f7c388, #fce0ba);
		}
	}

	.wrap {
		padding: 25rpx;
		box-sizing: border-box;
	}
</style>
